/*
 * @Author: 自迩
 * @Date: 2022-02-09 01:35:14
 * @LastEditTime: 2022-03-22 10:55:55
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\NoteReadBox\index.jsx
 */
import React, {useContext} from 'react';
import {toolBarPropsContext} from "../../pages/book"
import './index.css';


function NoteReadBox(props) {
  // console.log("俺是NoteReadBox");
  const {toolBarProps,toolBarDispatch} = useContext(toolBarPropsContext)
  const {deleteNote} = props
  const {noteReadBoxFlag,noteReadBoxText,selectedText} = toolBarProps

  const noteText = localStorage.getItem(noteReadBoxText)

  const handleMouseDown = (e)=>{
      e.stopPropagation()
  }
  const deleteNoteEvent = () =>{
    deleteNote(noteReadBoxText)
    toolBarDispatch({type:"noteReadBoxDisplay",data:{flag:false}})
  }

  return (
    <div className='noteReadBox' style={{display:noteReadBoxFlag? 'block':'none'}} onMouseDown={handleMouseDown}>
        <p className='title'>您在此处留下的感想</p>
        <p className='noteText'>{noteText}</p>
        <button className='delNote' onClick={deleteNoteEvent}>删除</button>
    </div>
  )
}
export default React.memo(NoteReadBox)